<template>
  <div class="article">
    <h4></h4>
    <div class="content">
      <h5>{{info['name']}}</h5>
      <p class="info1">
        <span>发布时间：{{info['pubdate']}}</span>
        <!-- <span>来源栏目：{{info['source']}}</span> -->
      </p>
      <p class="info2">
        <!-- <span>原文来源：<a :href="info['source_url']" target="_blank">{{info['source_url']}}</a></span> -->
        <el-button siz="medium" class="elbtn" @click="exportReport">导出报告</el-button>
      </p>
      <!-- <div>{{info['file_url']}}</div> -->
      <div class="ifr-div"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      fileUrl: ''
    }
  },
  methods: {
    init() {
      let id = this.$route.params.id
      let param = JSON.parse(decodeURIComponent((id)))
      if (!param) {
        return
      }
      this.$get(this.$Url.report.periodicalReportDetails, {
        esId: param.esId
      }).then(res => {
        let data = res.data
        if (data.pubdate) {
          data.pubdateYear = data.pubdate.split('-')[0]
        }
        // 测试
        // if (data.file_url) {
        //   data.file_url = 'gdt/002fcc0bfc0262cadf249e399d62086b.pdf'
        // }
        this.info = data
        this.getPdf()
      }).catch(err => {})
    },
    // 获取pdf
    getPdf() {
      // this.$post(this.$Url.report.download, {
      //   filename: `${this.info['id']}.pdf`,
      //   bucketName: 'gdt-bucket',
      //   showname: this.info['title']
      // }).then(res => {

      // }).catch(err => {})
      this.$axios({
        method: 'post',
        url: this.$Url.report.download,
        data: {
          filename: `${this.info['file_url']}`,
          bucketName: 'gdt-bucket',
          showname: this.info['name']
        },
        responseType: 'blob'
      }).then(res => {
        let blob = new Blob([res.data])
        let url = window.URL.createObjectURL(blob)
        this.fileUrl = url
        // 这样创建iframe，可以解决iframe的后退问题
        const ifrDom = document.createElement('iframe')
        ifrDom.className = 'ifr'
        ifrDom.src = `./static/pdfjs/web/viewer.html?file=${encodeURIComponent(url)}`
        $('.ifr-div').empty().append(ifrDom)
      }).catch(err => {})
    },
    // 导出报告
    exportReport() {
      const aLink = document.createElement('a')
      aLink.style.display = 'none'
      aLink.href = this.fileUrl
      aLink.setAttribute('download', this.info['name'] + '.pdf')
      document.body.appendChild(aLink)
      aLink.click()
      aLink.remove()
      // let url = `${this.$Url.report.download}?filename=${this.info['id']}.pdf&bucketName=gdt-bucket&showname=${this.info['title']}`
      // window.open(url, '_blank')
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.article {
  position: relative;
  width: 100%;
  min-height: calc(100vh - .4rem - .7rem);
  border-radius: 6px;
  background-color: $color2;
  h4 {
    line-height: .4rem;
    padding: 0 .2rem;
    border-bottom: 1px solid $color102;
    font-size: .16rem;
    text-decoration: underline;
    color: $color118;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content {
    position: relative;
    padding: .4rem .2rem .2rem;
    h5 {
      line-height: .24rem;
      margin-bottom: .3rem;
      font-size: .24rem;
      font-weight: normal;
      text-align: center;
      color: $color5;
    }
    .info1, .info2 {
      margin-bottom: .2rem;
      font-size: .16rem;
      text-align: center;
      color: $color5;
      span {
        display: inline-block;
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
    .info2 {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: .2rem;
      text-align: left;
      a {
        font-size: $mainColor !important;
        text-decoration: underline;
        cursor: pointer;
      }
      .elbtn {
        align-self: flex-start;
        padding: .1rem .2rem;
        border-color: $mainColor;
        font-size: .14rem;
        color: $color118;
        background-color: transparent;
        &:hover {
          border-color: $mainColor;
          color: $color2;
          background-color: $mainColor;
        }
      }
    }
    ::v-deep {
      .ifr {
        width: 100%;
        // min-height: calc(100vh - 0.4rem - 0.7rem - 0.6rem - 0.54rem - 0.16rem - 0.46rem - 0.9rem);
        min-height: calc(100vh - 0.4rem - 0.7rem - .3rem);
        max-height: 100vw;
      }
    }
  }
}
</style>